<template>
    <div>
        <navBar v-on="$listeners" v-bind="$attrs" @drawTaskListChange="drawTaskListChange" @taskChange="taskChange" />
        <LayoutDrag :dragBtnFlag="true">
            <template v-slot:left-content>
                <list class="left_content" v-on="$listeners" v-bind="$attrs" :taskList="taskList" :taskId="taskId" />
            </template>
            <template v-slot:right-content>
                <detail class="right_content" v-on="$listeners" v-bind="$attrs" />
            </template>
        </LayoutDrag>
    </div>
</template>

<script>
import list from './components/list.vue'
import detail from './components/detail.vue'
export default {
    name: 'GenescloudUiIndex',
    components: {
        list, detail
    },
    data() {
        return {
            taskList: [],
            taskId: null,
        };
    },

    mounted() {

    },

    methods: {
        drawTaskListChange(taskList) {
            this.taskList = taskList
        },
        taskChange(taskId) {
            this.taskId = taskId
        }
    },
};
</script>

<style lang="scss" scoped>
.left_content,
.right_content {
    box-shadow: 2px 2px 5px 3px #d7d2d2;
    border-radius: 10px;
    height: calc(100vh - 158px);
    // height: 100vh;
    padding-left: 20px;
}

.left_content {
    padding: 0 20px;
    margin-right: 15px;
}
</style>
